/**
 * @description 分类
 * 
 */
import avatar from '@/assets/img/avator.webp'
import React, { useState, useEffect } from 'react'



function CategoryList({ limit }) {

  const [actId, setActId] = useState(0)
  const [list, setList] = useState([])

  useEffect(() => {
    let newList = getCategory(limit)
    setList(newList)
  }, [limit])

  return (
    <div className="category">
      {/* 全部 */}
      <div className={`item ${actId === '' ? 'active' : ''}`} onClick={() => setActId('')}>
        <div className="text">全部</div>
      </div>

      {
        list.map(item => (
          <div key={item.id} className={`item ${actId === item.id ? 'active' : ''}`} onClick={() => setActId(item.id)}>
            <img className="img" src={avatar} />
            <div className="text">{item.title}</div>
          </div>
        ))
      }
    </div>
  )
}

// 获取分类数据
function getCategory(limit) {
  let list = []
  for (let index = 0; index < limit; index++) {
    list.push({
      id: index,
      title: `分类${index + 1}`
    })

  }
  return list
}
export default React.memo(CategoryList)